<template>
    <div>
        <a-modal
            :title="title"
            :visible="visible"
            :confirm-loading="loading"
            ok-text="保存"
            :width="900"
            @cancel="cancel">
            <div class="about-master-container">
                <a-form-model
                    ref="ruleForm"
                    :model="queryParam"
                    :rules="rules"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                    <a-row :gutter="24">
                        <a-col :md="12" :sm="12" v-if="isAddNode*1===4 || queryParam.parentId">
                            <a-form-model-item label="父节点" prop="parentName">
                                <BaseInput v-model="queryParam.parentName" disabled/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="12" :sm="12">
                            <a-form-model-item :label="$route.meta.title" prop="monitoringContentName">
                                <BaseInput v-model="queryParam.monitoringContentName" placeholder="请输入" :disabled="isAddNode*1===2" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="12" :sm="12">
                            <a-form-model-item label="状态" prop="status">
                                <a-select v-model="queryParam.status" :disabled="isAddNode*1===2">
                                    <a-select-option :value="0">可用</a-select-option>
                                    <a-select-option :value="1">不可用</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
            <template slot="footer">
                <a-button @click="cancel">
                  {{isAddNode*1==2?"关闭":'取消'}}
                </a-button>
                <a-button v-if="isAddNode*1!==2"
                :loading="bindLoading"
                type="primary"
                @click="save"
                >
                提交
                </a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import { addMonitoring, updateMonitoring} from '@/api/technical/monitoringContent'
export default {
    name: 'a' + Date.now(),
    props: {
        visible: {
            type: Boolean,
            required: true
        },
        formData: {
            type: Object,
            default: () => null
        },
        isAddNode:{
           type:Number,
           default:() => 0 
        }
    },
    data() {
        return {
            loading: false,
            queryParam: {
            },
            rules: {
                monitoringContentName: [{ required: true, message: '请输入', trigger: 'blur' }],
                status: [{ required: true, message: '请选择', trigger: 'blur' }]
            }
        }
    },
    watch: {
        visible(e) {
            console.log( this.formData,1)
            if (e) {
                  this.queryParam = this.formData
                try {
                    setTimeout(() => {
                        const requireDom = document.querySelectorAll('.ant-form-item-required')
                        requireDom.forEach((item) => {
                            item.parentNode.nextSibling.children[0].children[0].classList.add('requiredFormItem') // 找到'.ant-form-item-children'元素添加样式
                        })
                    }, 0)
                } catch {}
            } else {
                //this.queryParam = {}
                this.$refs.ruleForm.clearValidate()
            }
        },

    },
    computed:{
         title(){
            let isAddNode = this.isAddNode*1,
            name = null;
            if(isAddNode===1){
                name = '添加监测内容'
            }else if(isAddNode === 4){
                name = '添加节点'
            }else if(isAddNode ===3){
                if(this.formData.parentId){
                    name = '编辑节点'
                }else{
                    name = '编辑监测内容'
                }
            }else{
                name = '查看监测内容'
            }
            return name;
        }
    },
    methods: {
        async save() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.loading = true
                   try {
                     let res,
                       params = this.$clone(this.queryParam)
                     if (params.id) {
                       res = await updateMonitoring(params)
                     } else {
                       params.isModified = 0;
                       params.isThree = 1;
                       res = await addMonitoring(params)
                     }
                     this.loading = false;
                     this.$noticeSuccess('保存成功')
                     this.$emit('ok', params)
                     this.cancel()
                   } catch (e) {
                     this.loading = false;
                   }
                }
            })
        },
        cancel() {
            this.loading = false; 
            this.$emit('update:visible', false)
        }
    },
}
</script>
